<template>
  <view class="order-detail-container">
    <view class="top-bar">
      <u-icon name="arrow-left" size="28" color="#333" @click="$navigateBack()" />
      <text class="title">订单详情</text>
    </view>
    <view class="detail-section">
      <view class="row"><text class="label">业务类型：</text><text>棋牌</text></view>
      <view class="row"><text class="label">门店：</text><text>雀发潮旗舰店</text></view>
      <view class="row"><text class="label">时间：</text><text>2025-06-27 19:00</text></view>
      <view class="row"><text class="label">人数：</text><text>4</text></view>
      <view class="row"><text class="label">状态：</text><u-tag text="已预订" type="success" /></view>
      <view class="row"><text class="label">订单号：</text><text>1234567890</text></view>
      <u-button type="primary" shape="circle" size="large">联系客服</u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'OrderDetail',
}
</script>

<style scoped>
.order-detail-container { min-height: 100vh; background: #f8f8f8; }
.top-bar { display: flex; align-items: center; padding: 32rpx; }
.title { font-size: 36rpx; font-weight: bold; margin-left: 24rpx; }
.detail-section { background: #fff; border-radius: 16rpx; margin: 32rpx; padding: 32rpx; }
.row { display: flex; align-items: center; margin-bottom: 24rpx; font-size: 28rpx; }
.label { color: #888; width: 160rpx; }
</style>
